<template>
	<div id="duanlian-wrapper">
		<!--今日页面的头部-->
		<CourseTop v-if="$route.path=='/today'" :Count='Count' :Plane='Plane' :num='num' :selfCheck='selfCheck'></CourseTop>
		<!--总的运动时长和消耗-->
		<CourseStatus :Count='Count' :getTotalTime='getTotalTime' :getTotalKcal='getTotalKcal' :isToday='isToday'></CourseStatus>
		<div class="plan-course" v-if="isShowPlane">
			<div class="top">
				<span class="plane-title">计划课程</span>
				<router-link v-if="$route.path=='/today'" :to="{name:'schedule',query:{name:'today'}}">
					<button>
                        课程表
                    </button>
				</router-link>
			</div>
			<div class="bottom" v-if="Plane.message != ''">
				<div class="nonePlane" :style="'background-image: url('+$qiniu.url+'assets/img/bg1-1-1.jpg)'">
					<router-link :to="{name:'plan',params:{date:today.year+'-'+today.month+'-'+today.day}}">
						<div class="none-wrapper">
							当前无计划<span v-if="isTodayN">，请添加计划</span>
							<i v-if="isTodayN" :style="'background-image: url('+$qiniu.url+'assets/img/add1.png)'"></i>
						</div>
					</router-link>
				</div>
			</div>
			<div class="bottom" v-if="Plane.rest != '' && isToday == true">
				<router-link :to="{ name:'plan_detail',params:{id:Plane.data != '' ? Plane.data.plan.id : 1,date:today.year+'-'+today.month+'-'+today.day,name:$route.name}}">
					<div class="nonePlane" :style="'background-image: url('+$qiniu.url+'assets/img/bg1-1-1.jpg)'">
						<div class="none-wrapper">
							今日休息
						</div>
					</div>
				</router-link>
			</div>
			<div class="bottom" v-if="Plane.data != ''">
				<router-link :to="{ name:'plan_detail',params:{id:Plane.data != '' ? Plane.data.plan.id : 1,date:today.year+'-'+today.month+'-'+today.day,name:$route.name}}">
					<div class="img" :style="'background-image: url('+ Plane.data.image +')'"></div>
					<div class="bottom-wrapper">
						<div class="course-info">
							<span class="course-title one_txt_cut">{{ Plane.data.name }}</span>
							<!--未完成-->
							<div class="course-anpai" v-if='Plane.data.finished == false && !isToday'>时间：{{ 0 }}分钟
								<span>&nbsp;&nbsp;已燃脂：{{ 0 }}千卡</span>
								<span>&nbsp;&nbsp;得分：{{ 0 }}</span>
							</div>
							<!-- 已完成-->
							<div class="course-anpai" v-if='Plane.data.finished == true'>时间：{{ ( Plane.data.real.time ) }}
								<span>&nbsp;&nbsp;已燃脂：{{ (Plane.data.real.kcal) }}千卡</span>
								<span>&nbsp;&nbsp;得分：{{ (Plane.data.real.score) }}</span>
							</div>
							<!--待完成-->
							<div class="course-anpai" v-if='Plane.data.finished == false && isToday'>时间： {{ ( Plane.data.time ) }}
								<span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0'>&nbsp;&nbsp;燃脂：{{ Plane.data.kacl }}千卡</span>
								<span v-else>&nbsp;&nbsp;燃脂：{{ Plane.data.dynamicKcal }}千卡 </span>
							</div>
							<span v-if="!isToday" :class="{state:true, finish:true,'finishall':Plane.data.finished == false}">完成状态：{{ Plane.data.finished==false?"未完成":"已完成" }}</span>
							<span v-else class="state finish finishno">完成状态：{{ Plane.data.finished==false?"待完成":"已完成" }}</span>
						</div>
						<div class="course-time">
							<div class="ranzhi-anpai clearfix">{{ Plane.data.plan.name }}
								<!-- 详情暂时先不设置 -->
								<!--<router-link :to="{ name:'plan_detail',params:{id:PlaneTime != '' ? PlaneTime.id : 1}}">
                                    <i class="detail_info" >详情 > </i>
                                </router-link>-->
							</div>
							<div class="ranzhi-state">第{{ Plane.data.plan.finishDayNum }}/{{ Plane.data.plan.planDayNum }}天</div>
						</div>
					</div>
				</router-link>
			</div>
		</div>
		<div class="selfC-course" v-if="(!isToday) && selfCheck.message !='' ">
			<!-- 如果没有的话就让它隐藏  -->
		</div>
		<div class="selfC-course" v-else>
			<div class="top">
				自选课程
				<button id="editBtn" @click="editCourse" v-if=" isToday  && selfCheck.message ==''">编辑</button>
			</div>
			<div class="bottom" v-if="selfCheck.message ==''" v-for="item in selfCheck.data" :finished='item.finished==false?"false":"true"'>
				<div class="img" :style="'background-image: url('+ item.image +')'"></div>
				<div class="bottom-wrapper" :id="item.pushid">
					<div class="selfC-info" @click="detailInfo(item)">
						<span class="course-title one_txt_cut">{{ item.name }}</span>
						<!-- 未完成 -->
						<div class="course-anpai" v-if='item.finished == false && !isToday'>时间：{{ 0 }}分钟
							<span>&nbsp;&nbsp;已燃脂：{{ 0 }}千卡</span>
							<span>&nbsp;&nbsp;得分：{{ 0 }}</span>
						</div>
						<!-- 已完成 -->
						<div class="course-anpai" v-if='item.finished == true'>时间：{{ (item.real.time) }}
							<span>&nbsp;&nbsp;已燃脂：{{ (item.real.kcal) }}千卡</span>
							<span>&nbsp;&nbsp;得分：{{ (item.real.score) }}</span>
						</div>
						<!-- 待完成 -->
						<div class="course-anpai" v-if='item.finished == false && isToday'>时间：{{ (item.time) }}
							<span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0 '>&nbsp;&nbsp;燃脂：{{ item.kcal }}千卡</span>
							<span v-else>&nbsp;&nbsp;燃脂：{{ (item.dynamicKcal) }}千卡</span>
						</div>
						<span v-if="!isToday" :class="{state:true, finish:true,'finishall':item.finished == false}">完成状态：{{ item.finished==false?"未完成":"已完成" }}</span>
						<span v-else :class="{state:true, finish:true,'finishno':item.finished == false} ">完成状态：{{ item.finished==false?"待完成":"已完成" }}</span>
					</div>
					<div class="edit-wrapper">
						<div id="EDIT" class="edit editCheck">
							<div class="delW" @click="delCourse">
								<div class="del">
									<i class="delIconL" :style="'background-image: url('+$qiniu.url+'assets/img/addwww.png)'"></i>
								</div>
							</div>
						</div>

						<!--插入弹框-->
						<ToolTip :select='select' :pushid='item.pushid' v-on:sureShanchu='sureShanchu' v-on:quxiaoShanchu='quxiaoShanchu'></ToolTip>
					</div>
				</div>
			</div>
		</div>
		<div>
			<router-link :to="{ name:'allcourse',query:{date:today.year+'-'+today.month+'-'+today.day}}">
				<div class="noneSelfCourse" :style="'background-image: url('+$qiniu.url+'assets/img/bg2-1.jpg)'">
					<div class="none-wrapper">
						<span v-if="selfCheck.message !=''">当前无自选课程，</span>请添加自选课程
						<i :style="'background-image: url('+$qiniu.url+'assets/img/add1.png)'"></i>

					</div>
				</div>
			</router-link>
		</div>
		<Toast :showtoast='showtoast'></Toast>
		<Loading v-if="LoadingShow"></Loading>
		<div class="model-wrapper"></div>
		<!--一键向上-->
		<div id="upNow" @click='scrollHeight'>
			<div class="item item-upNow">
				<div class="wrapper">
					<div class='img' :style="'background-image: url('+$qiniu.url+'assets/img/upNow.png)'"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import CourseTop from './courseTop.vue';
	import CourseStatus from './courseStatus.vue';
	import ToolTip from '../common/tooltips.vue';
	import Toast from '../common/toast.vue';
	import Loading from '../loading';
	import {
		errFun,
		refreshTitle,
		getToday,
		setRange,
		today,
		compareDate,
		forPdate,
		forSdate,
		forCtime,
	} from "../../tools.js"
	import api from '../../api';
	//引入mintUI的组件
	import {
		CellSwipe
	} from 'mint-ui';
	export default {
		components: {
			CourseTop,
			CourseStatus,
			Loading,
			ToolTip,
			Toast,
		},
		computed: {
			LoadingShow() {
				return this.$store.state.loadings.show
			},
			//判断是哪一个路由
			isSchedule() {
				if(this.$route.path == "today") {
					return false;
				} else {
					return true;
				}
			},
			//判断是否是小于今日，false表示是过去的日子，
			isToday() {
				var NowYear = getToday(new Date()).year,
					NowMonth = getToday(new Date()).month,
					NowDay = getToday(new Date()).day;
				if(NowMonth == this.today.month) {
					if(this.today.day < NowDay) {
						return false;
					} else {
						return true;
					}
				} else if(NowMonth > this.today.month) {
					return false;
				} else if(NowMonth < this.today.month) {
					return true;
				}
			},
			//判断是否是今日
			isTodayN() {
				var NowYear = getToday(new Date()).year,
					NowMonth = getToday(new Date()).month,
					NowDay = getToday(new Date()).day;
				if(NowMonth == this.today.month && NowYear == this.today.year && NowDay == this.today.day) {
					return true;
				} else {
					return false;
				}
			},
			// 判断是否显示计划课程
			isShowPlane() {
				// 首先判断是否是过去
				if(this.isToday) {
					// 不是过去
					// 判断是否是今日
					if(this.isTodayN) {
						// 是今日无论有没有都得显示
						return true;
					} else {
						// 是还没到的日子
						if(this.Plane.message !== '') {
							// 如果没有计划，就不显示
							return false;
						} else if(this.Plane.rest !== '') {
							// 如果是休息，让其显示
							return true;
						} else {
							// 如果是有计划就显示
							return true;
						}
					}
				} else {
					// 过去的日子，无论是没有计划还是计划是休息，均让其不显示
					if(this.Plane.message !== '' || this.Plane.rest !== '') {
						return false;
					} else {
						// 如果有计划让其显示
						return true;
					}
				}
			},
			getUserInfo() {
				return this.$store.state.user
			},
			getTotalTime() {
				var time = this.PlaneTotal.time + this.SelfTotal.time;
				var min = parseInt(time / 60);
				var sec = time - min * 60;
				if(min == 0) {
					return sec + '秒';
				} else if(min < 60 && min > 0) {
					return min + '分钟'
				} else {
					return(min / 60).toFixed(1) + '小时'
				}

			},
			getTotalKcal() {
				if(this.Plane.data.finished == false && this.SelfTotal.kcal == 0) {
					return parseInt(this.PlaneTotal.kcal);
				} else if(this.Plane.data.finished == false && this.SelfTotal.kcal !== 0){
					return parseInt(this.SelfTotal.kcal + this.PlaneTotal.kcal);// + this.PlaneTotal.kcal
				}else if(this.Plane.data.finished == true && this.SelfTotal.kcal == 0){
					return parseInt(this.PlaneTotal.kcal);
				}else{
					return parseInt(this.SelfTotal.kcal + this.PlaneTotal.kcal);
				}
			}
		},
		created() {
			refreshTitle(this.$route.meta.title);
			this.$store.dispatch('CHANGE_LOADING_SHOW');
		},
		props: ['today'],
		data() {
			return {
				Count: {
					message: "",
					data: [],
				},
				Plane: {
					message: "",
					data: [],
					rest: "",
				},
				PlaneTotal: {
					time: 0,
					kcal: 0,
				},
				SelfTotal: {
					time: 0,
					kcal: 0,
				},
				selfCheck: {
					message: "",
					data: [],
				},
				select: null,
				showtoast: null,
				num: "",
				flagA: false,
			}
		},
		methods: {
			//编辑课程
			editCourse() {
				var editBtn = document.querySelector("#editBtn");
				var editCheck = document.querySelectorAll(".edit-wrapper");
				var selfCourse = document.querySelector(".selfC-course");
				var slBottom = selfCourse.querySelectorAll(".bottom");
				if(editBtn.innerHTML == "编辑") {
					editBtn.innerHTML = "完成";
					// tips.classList.remove("hide");
					for(var i = 0; i < editCheck.length; i++) {
						// if (slBottom[i].getAttribute('finished') == 'false') {
						slBottom[i].style.transition = "all .5s";
						slBottom[i].style.marginLeft = "40px";
					}
				} else {
					editBtn.innerHTML = "编辑";
					// tips.classList.add("hide");
					for(var i = 0; i < editCheck.length; i++) {
						slBottom[i].style.transition = "all .5s";
						slBottom[i].style.marginLeft = "0px";
					}
				}
			},
			delCourse() {
				//改变select的值
				var tar = event.target;
				document.querySelector(".model-wrapper").style.display = "block";
				this.select = tar.parentNode.parentNode.parentNode.parentNode.getAttribute('id') ||
					tar.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('id');
			},
			sureShanchu() {
				var that = this;
				api.getDeleteCourse(that.select).then(function(result) {
					that.AllCourse(that);
					//动态刷新状态值
					that.setTitle(that);
					document.querySelector(".model-wrapper").style.display = "none";
					// that.$store.dispatch('HIDDEN_LOADING_SHOW');
					return false;
				})
			},
			quxiaoShanchu() {
				this.select = null;
				document.querySelector(".model-wrapper").style.display = "none";
			},
			setTitle(that) {
				// that.$store.dispatch('CHANGE_LOADING_SHOW');
				var date = that.today.year + "-" + that.today.month + "-" + that.today.day
				api.getTodayStatus(date).then(function(result) {
					if(result.data.code == 100) {
						that.Count.message = '';
						result.data.result.totalKcal = result.data.result.totalKcal.toFixed(0);
						result.data.result.kcal = result.data.result.kcal.toFixed(0);
						result.data.result.totalTime = result.data.result.totalTime.toFixed(0);
						result.data.result.todayKcal = result.data.result.todayKcal.toFixed(0);
						result.data.result.todayCourseNum = result.data.result.todayCourseNum.toFixed(0);
						result.data.result.todayFinishedNum = result.data.result.todayFinishedNum.toFixed(0);
						result.data.result.todayRightRate = result.data.result.todayRightRate.toFixed(2);
						that.num = (result.data.result.todayRightRate * 100).toFixed(0);
						// that.num = 90;
						that.Count.data = result.data.result;
						that.Count.data.totalTime = that.Count.data.totalTime > 60 ? ((that.Count.data.totalTime / 60).toFixed(1)) + '小时' : that.Count.data.totalTime + '分钟';
					} else {
						that.Count.message = result.data.message;
					}
				});
			},
			planeCourse(that) {
				// that.$store.dispatch('CHANGE_LOADING_SHOW');
				var date = that.today.year + "-" + that.today.month + "-" + that.today.day;
				api.getPlaneCourse(date).then(function(result) {
					console.log(result);
					if(result.data.code == 100) {
						that.Plane.message = '';
						that.Plane.rest = '';
						that.Plane.data = that.forPdata(result.data.result);
					} else if(result.data.code == 103) {
						that.Plane.message = '';
						that.Plane.rest = result.data.message;
						that.PlaneTotal.time = 0;
						that.PlaneTotal.kcal = 0;
					} else {
						that.Plane.rest = '';
						that.PlaneTotal.time = 0;
						that.PlaneTotal.kcal = 0;
						that.Plane.message = result.data.message;
					}
				});
			},
			// 对计划课程的数据进行格式化
			forPdata(result) {
				if(result.finished) {
					if(result.real.time == 0) {
						this.PlaneTotal.time = 0;
					} else {
						this.PlaneTotal.time = result.real.time > 60 ? parseInt(result.real.time / 60) * 60 : result.real.time;
					}
					this.PlaneTotal.kcal = result.real.kcal;
					result.real.time = result.real.time > 60 ? parseInt(result.real.time / 60) + '分钟' : result.real.time + '秒';
					result.real.kcal = parseInt(result.real.kcal);
				} else {
					if(!this.isToday || result.time == 0) {
						this.PlaneTotal.time = 0
					} else {
						this.PlaneTotal.time = result.time > 60 ? parseInt(result.time / 60) * 60 : 1;
					}
					if(result.dynamicKcal) {
						this.PlaneTotal.kcal = result.dynamicKcal;
					} else {
						this.PlaneTotal.kcal = result.kcal;
					}
					result.time = result.time > 60 ? parseInt(result.time / 60) + '分钟' : result.time + '秒';
					result.kcal = parseInt(result.kcal);
					result.dynamicKcal = parseInt(result.dynamicKcal);
				}
				return result;
			},
			AllCourse(that) {
				var date = that.today.year + "-" + that.today.month + "-" + that.today.day
				api.getCourseInfo(date).then(function(result) {
					if(result.data.code == 100) {
						that.selfCheck.message = '';
						// console.log(result.data.result);
						// var dataObj = result.data.result;
						// var json = eval("('+dataObj+')");
						// console.log(dataObj)
						// TODO 排序逻辑
						var sortOptionCourse = function(arr) {
							var len = arr.length;
							for (var i = 0; i < len; i++) {
								var finishedtime = arr[i].finishedtime;
        						for (var j = i + 1; j < len; j++) {
										var temp;
            							if (arr[i].finishedtime < arr[j].finishedtime) {
											temp = arr[i];        //元素交换
                							arr[i] = arr[j];
											arr[j] = temp;
											// console.log(arr[i]);
            						    }
									}
    							}
							return arr;
						};
						var finalOptionCourse = sortOptionCourse(result.data.result); 
						// console.log(finalOptionCourse);//排序好的课程
						that.forTotal(finalOptionCourse);
						that.selfCheck.data = that.forSdate(finalOptionCourse);

					} else {
						that.SelfTotal.time = 0;
						that.SelfTotal.kcal = 0;
						that.selfCheck.message = result.data.message;
					}
				});
				this.$emit('AllCourse');
			},
			// 对获取的课成的数据进行格式化
			forSdate(result) {
				for(var i = 0; i < result.length; i++) {
					if(result[i].finished) {
						// 如果是完成的
						// 格式化real时间
						result[i].real.time = result[i].real.time > 60 ? parseInt(result[i].real.time / 60) + '分钟' : result[i].real.time + '秒';
						result[i].real.kcal = parseInt(result[i].real.kcal);
					} else {
						// 如果没有完成返回的应该是
						result[i].time = result[i].time > 60 ? parseInt(result[i].time / 60) + '分钟' : result[i].time + '秒'; // 格式化时间
						// 判断是否有用户信息
						if(result[i].dynamicKcal) {
							result[i].dynamicKcal = parseInt(result[i].dynamicKcal);
						} else {
							result[i].kcal = parseInt(result[i].kcal);
						}
					}
				}
				return this.forCourse(result); // 对时间进行格式化
			},
			// 进行总的汇总
			forTotal(result) {
				var time = 0,
					kcal = 0,
					flag = true;
				for(var i = 0; i < result.length; i++) {
					if(result[i].finished) {
						flag = false;
						// if (result[i].real.time == 0) {
						//     time = time + 0;
						// } else {
						time = time + (result[i].real.time > 60 ? parseInt(result[i].real.time / 60) * 60 : result[i].real.time);
						// }
						kcal = kcal + parseInt(result[i].real.kcal);
					}
				}
				if(flag == true) {
					for(var i = 0; i < result.length; i++) {
						if(result[i].time == 0) {
							time = 0;
						} else {
							time = time + (result[i].time > 60 ? parseInt(result[i].time / 60) * 60 : result[i].time);
						}
						if(result[i].dynamicKcal) {
							kcal = kcal + parseInt(result[i].dynamicKcal);
						} else {
							kcal = kcal + parseInt(result[i].kcal);
						}
					}
				}
				this.SelfTotal.time = time;
				this.SelfTotal.kcal = kcal;
			},
			// 对获取的课程进行排序
			forCourse(arr) {
				var falseArr = [],
					newArr = [],
					trueArr = [];
				for(var i = 0; i < arr.length; i++) {
					if(arr[i].finished == true) {
						trueArr.push(arr[i]);
					} else {
						falseArr.push(arr[i]);
					}
				}

				return newArr.concat(falseArr, trueArr);
			},
			//改变编辑状态
			checkEdit() {
				// var tips = document.querySelector("#tips");
				var editBtn = document.querySelector("#editBtn");
				var editCheck = document.querySelectorAll(".editCheck");
				if(editBtn != null) {
					editBtn.innerHTML = '编辑';
					// tips.classList.add("hide");
					for(var i = 0; i < editCheck.length; i++) {
						editCheck[i].classList.add("hide");
					}
				} else {
					return false;

				}
			},
			// 进行自选课程的跳转
			detailInfo(item) {
				// 首先判断是否是今日及以后的日期，
				// this.isToday返回的是false表示是过去的日子，反之
				var that = this;
				if(this.isToday == true) {
					// 如果是今日往后，跳转至课程详情页面
					item.courseid = item.courseid ? item.courseid : item.id; //将课程的id进行统一
					// 考虑到如果是今日的情况下，课程完成了，就进行跳转到结果页，
					if(item.finished == true) {
						// 已经完成了的话，进行跳转结果页
						// 进行一次请求，判断是否有当前pushID的数据
						api.getResultBY(item.pushid).then(function(response) {
							if(response.data.code === 201) {
								// 表示没有pushid的健身数据
								that.showToast(that);
							} else if(response.data.code === 200) {
								var id = item != '' ? item.pushid : 1;
								var title = item != '' ? item.name : '';
								window.location.href = "http://share.shapejoy.com/wechat/" + id + '?' + title;
								// window.location.href = "http://192.168.1.102:9090/" + id + '?' + title;
							}
						})
					} else {
						that.setCourse(item, that);
					}
				} else {
					// 如果是以前的日期，跳转至结果页面
					// 判断是否完成
					if(item.finished == true) {
						// 已经完成了的话，进行跳转结果页
						api.getResultBY(item.pushid).then(function(response) {
							if(response.data.code === 201) {
								// 表示没有pushid的健身数据
								that.showToast(that);
							} else if(response.data.code === 200) {
								var id = item != '' ? item.pushid : 1;
								var title = item != '' ? item.name : '';
								window.location.href = "http://share.shapejoy.com/wechat/" + id + '?' + title;
								// window.location.href = "http://192.168.1.102:9090/" + id + '?' + title;

							}
						})
					} else {
						// 弹出一个toast
						that.showToast(that);
					}
				}
			},
			// 弹出toast
			showToast(that) {
				var model = document.querySelector(".model-wrapper");
				// toast.classList.add("show");
				that.showtoast = 'nojianshen';
				model.style.display = "block";
				setTimeout(function() {
					that.showtoast = null;
					model.style.display = "none";
				}, 1000)
			},
			// 进行结果页的跳转
			setResult(item, that) {
				// that.$router.push({
				//     name: 'result',
				//     params: {
				//         id: item != '' ? item.pushid : 1,
				//         title: item != '' ? item.name : '',
				//         name: that.$route.name,
				//     }
				// });
				window.localtion.href = 'http://www.baidu.com'
			},
			// 进行课程详情页面的跳转
			setCourse(item, that) {
				that.$router.push({
					name: 'course_detail',
					params: {
						id: item != '' ? item.courseid : 1,
					},
					query: {
						date: that.today.year + '-' + that.today.month + '-' + that.today.day
					},
				})
			},
			// 计划详情的跳转
			planedetail() {
				this.$router.push('/today');
			},
			scrollTop() {
				var upNow = document.querySelector('#upNow');
				if(upNow) {
					if(document.body.scrollTop > 600) {
						// 显示
						upNow.style.display = 'block';
					} else {
						upNow.style.display = 'none';
					}
					return;
				}

			},
			scrollHeight() {
				var oTop = document.body.scrollTop || document.documentElement.scrollTop;
				if(oTop > 0) {
					document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
					var timer = requestAnimationFrame(this.scrollHeight);
				} else {
					cancelAnimationFrame(timer);
				}
			}
		},
		watch: {
			today: {
				handler: function(val, oldVal) {
					this.AllCourse(this);
					this.planeCourse(this);
					this.setTitle(this);
					this.checkEdit();
				},
				deep: true
			}
		},
		mounted() {
			this.$nextTick(function() {
				var that = this;
				//渲染标题
				that.setTitle(that);
				//渲染计划课程
				that.planeCourse(that)
				//渲染自选课程
				that.AllCourse(that);
				window.onscroll = this.scrollTop;
			})
		}
	}
</script>
<style>
	#duanlian-wrapper {
		width: 100%;
		height: 100%;
	}
	
	#duanlian-wrapper .plan-course {
		width: 100%;
		height: 232px;
		overflow: hidden;
		position: relative;
	}
	
	#duanlian-wrapper .plan-course .top {
		width: 100%;
		height: 32px;
		background-color: #fdb811;
		color: #161616;
		text-indent: 15px;
		padding: 0;
		margin: 0;
		position: relative;
	}
	
	#duanlian-wrapper .plan-course .top .plane-title {
		font-size: 16px;
		line-height: 32px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#duanlian-wrapper .plan-course .top button,
	#duanlian-wrapper .selfC-course .top button {
		width: 60px;
		height: 20px;
		position: absolute;
		right: 12px;
		top: 6px;
		border-radius: 5px;
		color: #fdb811;
		background-color: #161616;
		font-size: 12px;
		border: none;
		outline: none;
	}
	
	#duanlian-wrapper .plan-course .bottom {
		width: 100%;
		height: 200px;
		overflow: hidden;
		position: relative;
		padding: 0;
		margin: 0;
	}
	
	#duanlian-wrapper .plan-course .bottom .nonePlane {
		background-size: cover;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	#duanlian-wrapper .plan-course .bottom .nonePlane .none-wrapper {
		width: 100%;
		height: 100%;
		line-height: 150px;
		text-align: center;
		background-color: rgba(0, 0, 0, .6);
		color: #fdb811;
		position: relative;
		overflow: hidden;
	}
	
	#duanlian-wrapper .plan-course .bottom .nonePlane .none-wrapper i {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 52%;
		left: 48%;
		transform: translateY(-50%);
	}
	
	.noneSelfCourse i {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 45%;
		left: 48%;
		transform: translateY(-50%);
	}
	
	{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 52%;
		left: 48%;
		transform: translateY(-50%);
	}
	
	#duanlian-wrapper .plan-course .bottom .img,
	.selfC-course .bottom .img {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#duanlian-wrapper .plan-course .bottom .bottom-wrapper {
		width: 100%;
		height: 200px;
		padding-left: 20px;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, .6);
		position: absolute;
		top: 0px;
		left: 0;
		overflow: hidden;
	}
	
	#duanlian-wrapper .plan-course .bottom .course-info {
		width: 100%;
		height: 130px;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	#duanlian-wrapper .plan-course .bottom .course-info .course-title {
		font-size: 25px;
		border-bottom: 1px solid #fdb811;
		line-height: 45px;
		color: #fdb811;
	}
	
	#duanlian-wrapper .plan-course .bottom .course-info .course-anpai,
	.plan-course .bottom .course-info .state {
		font-size: 16px;
		line-height: 40px;
		color: #fdb811;
	}
	
	.plan-course .bottom .course-info .finish,
	.selfC-course .bottom .selfC-info .finish {
		border: 1px solid rgba(0, 187, 156, 0.5);
		color: #00bb9c!important;
		text-align: center;
		line-height: 25px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px!important;
		display: inline-block;
	}
	
	.plan-course .bottom .course-info .finishall,
	.selfC-course .bottom .selfC-info .finishall {
		background-color: rgba(253, 184, 17, 0.5);
		border: none;
		font-size: 14px;
		color: black!important;
	}
	
	.plan-course .bottom .course-info .finishno,
	.selfC-course .bottom .selfC-info .finishno {
		background-color: rgba(253, 184, 17, 1);
		border: none;
		font-size: 14px;
		color: black!important;
	}
	
	#duanlian-wrapper .plan-course .bottom .course-time {
		width: 100%;
		height: 50px;
	}
	
	#duanlian-wrapper .plan-course .bottom .course-time .ranzhi-anpai,
	.plan-course .bottom .course-time .ranzhi-state {
		font-size: 14px;
		line-height: 30px;
		color: #fdb811;
		display: block;
		position: relative;
	}
	
	#duanlian-wrapper .plan-course .bottom .course-time .ranzhi-anpai .detail_info {
		width: 60px;
		height: 30px;
		background-color: #00bb9c;
		display: block;
		position: absolute;
		top: 0;
		left: 100px;
		border-radius: 5px;
		color: #fdb811;
		text-align: center;
	}
	
	#duanlian-wrapper .selfC-course {
		width: 100%;
		position: relative;
	}
	
	#duanlian-wrapper .selfC-course .top {
		width: 100%;
		height: 32px;
		font-size: 16px;
		line-height: 32px;
		color: #fdb811;
		text-indent: 15px;
		padding: 0;
		margin: 0;
		position: relative;
		background-color: #fdb811;
		color: #161616;
	}
	
	#duanlian-wrapper .selfC-course .top .tips {
		float: right;
		margin-right: 60px;
		font-size: 13px;
		width: 120px;
		height: 50px;
		position: relative;
	}
	
	#duanlian-wrapper .selfC-course .top .tips span {
		display: block;
		float: left;
		padding: 0 2px;
	}
	
	#duanlian-wrapper .selfC-course .top .tips .subIcon {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 14.333%;
		left: 31px;
		margin: auto;
		background-repeat: no-repeat;
		background-size: 15px 15px;
	}
	
	#duanlian-wrapper .selfC-course .bottom {
		width: 100%;
		height: 150px;
		position: relative;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		background-color: #31384b;
		border-bottom: 5px solid rgb(37, 39, 60);
	}
	
	.noneSelfCourse {
		background-size: cover;
		width: 100%;
		height: 150px;
	}
	
	.noneSelfCourse .none-wrapper {
		width: 100%;
		height: 100%;
		padding-top: 50px;
		text-align: center;
		background-color: rgba(0, 0, 0, .6);
		color: #fdb811;
		position: relative;
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper {
		width: 100%;
		height: 150px;
		padding-left: 20px;
		box-sizing: border-box;
		position: absolute;
		padding-top: 10px;
		top: 0px;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper .selfC-info {
		width: 100%;
		height: 130px;
		box-sizing: border-box;
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper .edit-wrapper {
		width: 25px;
		height: 96.555%;
		position: absolute;
		top: 0px;
		left: -25px;
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper .edit-wrapper .edit {
		width: 25px;
		height: 100%;
		z-index: 999;
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper .edit-wrapper .edit .delW {
		width: 25px;
		height: 100%;
		z-index: 999;
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper .edit-wrapper .edit .delW .del {
		width: 25px;
		height: 100%;
		background-position: -40px -25px;
		background-repeat: no-repeat;
		background-size: 250px 205px;
		/*background-size: 100% 100%;*/
		position: relative;
	}
	
	#duanlian-wrapper .selfC-course .bottom .bottom-wrapper .edit-wrapper .edit .del .delIconL {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		position: absolute;
		top: 40%;
		left: -7px;
		margin: auto;
		/*background:  url("../../assets/img/del.png") */
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		/*background-color: red;*/
	}
	
	#duanlian-wrapper .selfC-course .bottom .selfC-info .course-title {
		border-bottom: 1px solid #fdb811;
		font-size: 25px;
		line-height: 45px;
		color: #fdb811;
	}
	
	#duanlian-wrapper .selfC-course .bottom .selfC-info .course-anpai,
	.selfC-course .bottom .selfC-info .state {
		font-size: 16px;
		line-height: 30px;
		color: #fdb811;
	}
	
	#duanlian-wrapper .add-course {
		display: block;
		width: 100%;
		height: 32px;
		background-color: #fdb811;
		position: relative;
	}
	
	#duanlian-wrapper .add-course .add-wrapper {
		height: 100%;
		text-align: center;
		font-size: 16px;
		line-height: 32px;
		color: #161616;
	}
	
	#duanlian-wrapper .add-course .add-wrapper .addCIcon {
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-size: contain;
		float: left;
		margin-top: 16px;
		margin-right: 5px;
	}
	/*隐藏元素*/
	
	#duanlian-wrapper .active {
		transition: all 1s;
		margin-left: 72px;
	}
	/*显示元素*/
	
	#duanlian-wrapper .show {
		display: block;
	}
	/*遮罩层的样式*/
	
	.model-wrapper {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
	}
	
	#upNow {
		position: fixed;
		bottom: 25%;
		right: 5%;
		display: none;
	}
	
	#upNow p {
		color: #ccc;
		padding-top: 0.3rem;
	}
	
	#upNow .item-upNow {
		width: auto;
	}
	
	#upNow .wrapper {
		height: 46px;
		width: 46px;
		border-radius: 50%;
		background-origin: border-box;
		position: relative;
		top: -59px;
		left: 47%;
		-webkit-transform: translateX(-50%);
		background-image: radial-gradient(circle at center, transparent 0%, transparent 40%, #00BA9B 100%);
	}
	
	#upNow .wrapper .img {
		width: 26px;
		height: 22px;
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		left: 50%;
		top: 50%;
		margin-left: -13px;
		margin-top: -10px;
	}
</style>